/*
 *
 * @ProjectName:    my_umi_app
 * @Package:
 * @ClassName:      message_widget
 * @Description:    留言板Widget
 * @Author:         SuPeiSen
 * @CreateDate:     2021/3/3 10:43 上午
 * @UpdateDate:     2021/3/3 10:43 上午
 * @UpdateRemark:   更新说明：
 * @Version:        1.0
 */

import { BlogMessageItemType } from '@/type/blog/message_type';
import './style.less';
import React from 'react';
import {
  articleContentImage,
  boolToNumOneOrZero,
  numberToBool,
} from '@/utils/app_fun';
import { MessageItemType } from '@/type/message_type';
import { LoadingWidget } from '@/widget/loading_wdiget/loading_widget';

/**
 * 显示留言
 * @param messageItem 留言数据
 * @param isSecond 是否是二级
 * @constructor
 */
export const MessageWidget = (
  messageItem: BlogMessageItemType,
  isSecond: boolean = false,
) => {
  let circleBgColor: string = '#3d97d4';
  let messageTip = '游客';
  let messageTipColor = '#000';
  // 是不是作者
  if (numberToBool(messageItem.is_author)) {
    circleBgColor = '#000';
    messageTip = '帅气博主';
    messageTipColor = '#ff0000';
  } else {
    // 性别
    circleBgColor = numberToBool(messageItem.user_sex) ? '#ea89a7' : '#3d97d4';
  }

  // 距离左边的边距
  const itemMarginLeft = isSecond ? '13%' : '0';
  return (
    <div
      className="message_item"
      style={{ marginLeft: itemMarginLeft }}
      key={messageItem.id}
    >
      {/*头像*/}
      <div className="message_item_left">
        <div
          className="message_item_name_circle"
          style={{ backgroundColor: circleBgColor }}
        >
          <span>{messageItem.user_name[0]}</span>
        </div>
      </div>
      {/*用户信息*/}
      <div className="message_item_right">
        <span
          className="message_item_right_user_name"
          style={{ color: messageTipColor }}
        >
          {messageTip}：{messageItem.user_email}
        </span>
        <i>{messageItem.add_time}</i>
        {/*富文本*/}
        <div className="message_item_message_content">
          <div
            className="message_item_message_content_child"
            dangerouslySetInnerHTML={{
              __html: articleContentImage(messageItem.message_content),
            }}
          />
        </div>
      </div>
    </div>
  );
};

/**
 * 返回留言列表
 * @param props
 * @constructor
 */
export const MessageListWidget = (props: {
  messageList?: Array<BlogMessageItemType>;
}) => {
  if (props.messageList === undefined) {
    return <LoadingWidget />;
  }
  if (props.messageList.length === 0) {
    return (
      <div className="message_lists_null">
        <span>😭😭😭</span>
        <span style={{ color: '#e03cd4' }}>暂无留言</span>
        <span style={{ color: '#9e0fd9' }}>欢迎各位大佬留言</span>
      </div>
    );
  }
  let messageItemList: Array<JSX.Element> = [];
  props.messageList.forEach((messageItem) => {
    messageItemList.push(MessageWidget(messageItem));
    if (messageItem.children !== undefined) {
      messageItem.children.forEach((secondMessageItem) => {
        messageItemList.push(MessageWidget(secondMessageItem, true));
      });
    }
  });

  return <div>{messageItemList}</div>;
};
